<template>
    <div class="scrollbox">
        <!-- 头部 -->
        <v-header></v-header>
        <div class="dis10"></div>
        <div class="listbox aps9">
            <v-list
                    api="snmp_exporter.module_list"
                    ref="list"
                    cards="1"
                    :params="params"
            >
                <template slot="search">
                    <el-button
                            v-if="userinfo.role !='view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            @click="edit(params)"
                    >添加
                    </el-button>&nbsp;&nbsp;&nbsp;
                    <el-button
                            v-if="userinfo.role !='view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-sort"
                            @click="generate()"
                            style="float: right"
                    >生成配置</el-button>
                </template>
                <template slot="head" slot-scope="props">
                    <thead>
                    <tr class="tr">
                        <th class="c1">Module</th>
                        <th>walk/get</th>
                        <!--<th>get</th>-->
                        <th>指标</th>
                        <th>团体</th>
                        <!--<th>认证协议</th>-->
                        <!--<th>隐私协议</th>-->
                        <!--<th>安全级别</th>-->
                        <!--<th>团体</th>-->
                        <!--<th>上下文名称</th>-->
                        <th>超时</th>
                        <th>重复次数</th>
                        <th>最大并发数</th>
                        <th>版本</th>
                        <th>状态</th>
                        <th>日期</th>
                        <th v-if="userinfo.role !='view'">操作</th>
                    </tr>
                    </thead>
                </template>
                <template slot="item" slot-scope="props">
                    <tr>
                        <td class="font-blue">
                            <a href="javascript:void(0)" class="font-blue f14" @click="setBaseInfo(props.item)">
                                <span v-if="!props.item.remark">-</span>
                                {{ props.item.remark }}<br>
                                <span class="font-gray2 f12" >({{ props.item.name || '-' }})</span>

                            </a>
                        </td>
                        <td class="font-gray2">
                            {{ props.item.walk || '-' }}<br>
                            {{ props.item.get || '-' }}
                        </td>
                        <!--<td class="font-gray2">-->
                            <!--{{ props.item.get || '-' }}-->
                        <!--</td>-->
                        <td class="font-gray2">
                            {{props.item.metrics || '-'}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.community || '-'}}
                        </td>
                        <!--<td class="font-gray2">-->
                            <!--<span v-if="!props.item.auth_protocol">-</span>-->
                            <!--{{props.item.auth_protocol}}-->
                        <!--</td>-->
                        <!--<td class="font-gray2">-->
                            <!--<span v-if="!props.item.priv_protocol">-</span>-->
                            <!--{{props.item.priv_protocol}}-->
                        <!--</td>-->
                        <!--<td class="font-gray2">-->
                            <!--<span v-if="!props.item.security_level">-</span>-->
                            <!--{{props.item.security_level}}-->
                        <!--</td>-->
                        <!--<td class="font-gray2">-->
                        <!--{{props.item.community }}-->
                        <!--</td>-->
                        <!--<td class="font-gray2">-->
                        <!--{{props.item.context_name }}-->
                        <!--</td>-->
                        <td class="font-gray2">
                            {{props.item.timeout || '-'}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.retries || '-'}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.max_repetitions || '-'}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.version || '-'}}
                        </td>
                        <!--<td class="font-gray2">-->
                            <!--{{props.item.dateline }}-->
                        <!--</td>-->
                        <!--<td class="font-gray2">-->
                        <!--{{props.item.retries}}-->
                        <!--</td>-->
                        <!--<td class="font-gray2">-->
                        <!--{{props.item.max_repetitions }}-->
                        <!--</td>-->
                        <td class="font-gray2">
                            <span v-if="props.item.status === 1" style="padding-left: 5px" title="开启">
                                <i class="el-icon-success" style="color: #009f3d"></i>
                            </span>
                            <span v-if="props.item.status === 0" style="padding-left: 5px" title="关闭">
                                <i class="el-icon-error" style="color: #f56c6c"></i>
                            </span>
                        </td>
                        <td class="font-gray2">
                            {{props.item.dateline | dateFormat("yyyy-MM-dd HH:mm") || '-'}}
                        </td>
                        <td v-if="userinfo.role !='view'" style="width: 100px">
                            <el-button
                                    size="mini"
                                    title="编辑"
                                    icon="el-icon-edit"
                                    type="primary"
                                    circle
                                    @click="edit(props.item)"
                            ></el-button>
                            <el-button
                                    size="mini"
                                    title="删除"
                                    icon="el-icon-delete"
                                    type="danger"
                                    circle
                                    @click="del(props.item)"
                            ></el-button>
                        </td>
                    </tr>
                </template>
            </v-list>
        </div>

        <!-- 编辑 -->
        <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
            <div class="dialogform">
                <el-form
                        :model="form"
                        :rules="rules"
                        ref="form"
                        label-width="120px"
                        label-position="right"
                        class="demo-ruleForm"
                >
                    <el-form-item label="名称" prop="name" class="line20">
                        <span slot="label">
                            <span>名称</span> <br>
                            <span class="font-gray2 f12">(name)</span>
                        </span>
                        <el-input v-model="form.name"
                                  :disabled="editData.id == 0?false:true"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark"  class="line20">
                        <span slot="label">
                            <span>备注</span> <br>
                            <span class="font-gray2 f12">(remark)</span>
                        </span>
                        <el-input v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="指标" class="line20" prop="metrics">
                        <span slot="label">
                            <span>指标</span> <br>
                            <span class="font-gray2 f12">(metrics)</span>
                        </span>
                        <el-input v-model="form.metrics"></el-input>
                    </el-form-item>
                    <el-form-item label="团体" class="line20">
                        <span slot="label">
                            <span>团体</span> <br>
                            <span class="font-gray2 f12">(community)</span>
                        </span>
                        <el-input v-model="form.community" ></el-input>
                    </el-form-item>
                    <el-form-item label="walk" class="line20">
                        <span slot="label">
                            <span>walk</span> <br>
                            <span class="font-gray2 f12">(walk)</span>
                        </span>
                        <el-input v-model="form.walk"></el-input>
                    </el-form-item>
                    <el-form-item label="get" class="line20">
                        <span slot="label">
                            <span>get</span> <br>
                            <span class="font-gray2 f12">(get)</span>
                        </span>
                        <el-input v-model="form.get"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名称"  class="line20">
                        <span slot="label">
                            <span>用户名</span> <br>
                            <span class="font-gray2 f12">(username)</span>
                        </span>
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" class="line20">
                        <span slot="label">
                            <span>密码</span> <br>
                            <span class="font-gray2 f12">(password)</span>
                        </span>
                        <el-input v-model="form.password" ></el-input>
                    </el-form-item>
                    <el-form-item label="版本" class="line20">
                        <span slot="label">
                            <span>版本</span> <br>
                            <span class="font-gray2 f12">(version)</span>
                        </span>
                        <el-input v-model="form.version" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="重复次数" class="line20">
                        <span slot="label">
                            <span>重复次数</span> <br>
                            <span class="font-gray2 f12">(retries)</span>
                        </span>
                        <el-input v-model="form.retries" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="最大重复次数" class="line20">
                        <span slot="label">
                            <span>最大并发数</span> <br>
                            <span class="font-gray2 f12">(max_repetitions)</span>
                        </span>
                        <el-input v-model="form.max_repetitions" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="超时" class="line20">
                        <span slot="label">
                            <span>超时</span> <br>
                            <span class="font-gray2 f12">(timeout)</span>
                        </span>
                        <el-input v-model="form.timeout" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="认证协议" class="line20">
                        <span slot="label">
                            <span>认证协议</span> <br>
                            <span class="font-gray2 f12">(auth_protocol)</span>
                        </span>
                        <el-input v-model="form.auth_protocol"></el-input>
                    </el-form-item>
                    <el-form-item label="隐私协议" class="line20">
                        <span slot="label">
                            <span>隐私协议</span> <br>
                            <span class="font-gray2 f12">(priv_protocol)</span>
                        </span>
                        <el-input v-model="form.priv_protocol"></el-input>
                    </el-form-item>
                    <el-form-item label="隐私密码" class="line20">
                        <span slot="label">
                            <span>隐私密码</span> <br>
                            <span class="font-gray2 f12">(priv_password)</span>
                        </span>
                        <el-input v-model="form.priv_password"></el-input>
                    </el-form-item>
                    <el-form-item label="安全级别" class="line20">
                        <span slot="label">
                            <span>安全级别</span> <br>
                            <span class="font-gray2 f12">(security_level)</span>
                        </span>
                        <el-input v-model="form.security_level" ></el-input>
                    </el-form-item>
                    <el-form-item label="上下文名称" class="line20">
                        <span slot="label">
                            <span>上下文名称</span> <br>
                            <span class="font-gray2 f12">(context_name)</span>
                        </span>
                        <el-input v-model="form.context_name" ></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio v-model="form.status" :label="1">开启</el-radio>
                        <el-radio v-model="form.status" :label="0">关闭</el-radio>
                    </el-form-item>
                    <el-form-item label prop="inlock">
                        <el-button type="primary" @click="save">保 存</el-button>
                        <el-button @click="editData.status = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="tc"></div>
        </el-dialog>
        <!-- 编辑结束 -->
        <!-- 详情开始 -->
        <v-baseinfo v-model="drawer.show">
            <div class="wrapper-content" v-if="drawer.data" slot="user/list">
                <div class="content-item">
                    <span class="label wid120">
                        名称<br>
                        (name)：
                    </span>
                    <span class="value">{{drawer.data.name || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        备注<br>
                        (remark)：
                    </span>
                    <span class="value">{{drawer.data.remark || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        指标<br>
                        (metrics)：
                    </span>
                    <span class="value">{{drawer.data.metrics || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        团体<br>
                        (community)：
                    </span>
                    <span class="value">{{drawer.data.community || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        Walk<br>
                        (walk)：
                    </span>
                    <span class="value">{{drawer.data.walk || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        Get<br>
                        (get)：
                    </span>
                    <span class="value">{{drawer.data.get || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        用户名<br>
                        (username)：
                    </span>
                    <span class="value">{{drawer.data.username || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        密码<br>
                        (password)：
                    </span>
                    <span class="value">{{drawer.data.password || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        重试次数<br>
                        (retries)：
                    </span>
                    <span class="value">{{drawer.data.retries || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        最大并发数<br>
                        (max_repetitions)：
                    </span>
                    <span class="value">{{drawer.data.max_repetitions || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        版本<br>
                        (version)：
                    </span>
                    <span class="value">{{drawer.data.version || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        认证协议<br>
                        (auth_protocol)：
                    </span>
                    <span class="value">{{drawer.data.auth_protocol || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        隐私协议<br>
                        (priv_protocol)：
                    </span>
                    <span class="value">{{drawer.data.priv_protocol || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        隐私密码<br>
                        (priv_password)：
                    </span>
                    <span class="value">{{drawer.data.priv_password || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        安全级别<br>
                        (security_level)：
                    </span>
                    <span class="value">{{drawer.data.security_level || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        上下文名称<br>
                        (context_name)：
                    </span>
                    <span class="value"
                          style="width: 400px ;word-break:break-all">{{drawer.data.context_name || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        超时<br>
                        (timeout)：
                    </span>
                    <span class="value">{{drawer.data.timeout || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        日期<br>
                        (dateline)：
                    </span>
                    <span class="value">{{drawer.data.dateline | dateFormat("yyyy-MM-dd HH:mm") || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">状态：</span>
                    <span class="value" v-if="drawer.data.status === 1">开启</span>
                    <span class="value" v-if="drawer.data.status === 0">关闭</span>
                </div>
            </div>
        </v-baseinfo>
        <!-- 详情结束 -->
    </div>
</template>
<script>
  import {cacheUserinfo} from "@cache";

  export default {
    data () {
      return {
        form: {
          id: 0,
          remark:'',
          auth_protocol: '',
          community: '',
          context_name: "",
          dateline: 0,
          get: '',
          max_repetitions: 0,
          metrics: "",
          priv_password: "",
          priv_protocol: "",
          password: "",
          retries: 0,
          security_level: "",
          status: 1,
          timeout: 0,
          username: "",
          name:"",
          version: 0,
          walk: "",
        },
        editData: {
          status: false,
          title: "",
          id: 0
        },
        rules: {
          name: [
            { required: true, message: '输入名称', trigger: 'blur' }
          ],
          metrics: [
            { required: true, message: '输入指标', trigger: 'blur' }
          ],
        },
        drawer: {
          show: false,
          data: {},
          name: "采集任务"
        },
        purMenu: [],
        params: {},
        userinfo: {},
        loading: false
      };
    },
    watch: {
      "drawer.show": {
        handler (newV) {
          if (!newV) {
            this.drawer.data = null;
            this.purMenu = [];
          }
        }
      }
    },
    methods: {
      edit (item) {
        if (JSON.stringify(item) === '{}') {
          this.editData.title = '添加Moudle'
        } else {
          this.editData.title = '修改Moudle'
        }
        // console.log(this.form)
        this.editData.status = true;
        this.editData.id = item.id || 0;
        this.form.id = item.id || 0;
        this.form.auth_protocol = item.auth_protocol || "";
        this.form.community = item.community || "";
        this.form.context_name = item.context_name || "";
        this.form.dateline = item.dateline || 0;
        this.form.get = item.get || "";
        this.form.walk = item.walk || "";
        this.form.max_repetitions = item.max_repetitions || 0;
        this.form.metrics = item.metrics || "";
        this.form.priv_password = item.priv_password || "";
        this.form.priv_protocol = item.priv_protocol || "";
        this.form.password = item.password || "";
        this.form.security_level = item.security_level || "";
        this.form.status = item.status === 0 ? 0 : 1;
        this.form.timeout = item.timeout || 0;
        this.form.username = item.username || "";
        this.form.name = item.name || "";
        this.form.version = item.version || 0;
        this.form.remark = item.remark || "";
        this.form.retries = item.retries || 0;
      },
      save () {
        this.form.id = Number(this.form.id);
        this.form.dateline = Number(this.form.dateline);
        this.form.max_repetitions = Number(this.form.max_repetitions);
        this.form.status = Number(this.form.status);
        this.form.timeout = Number(this.form.timeout);
        this.form.version = Number(this.form.version);
        this.form.retries = Number(this.form.retries);
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            let url = "snmp_exporter.module_save";
            that.$api.jpost(url, that.form).then(res => {
              if (res.status === 1) {
                this.$success(res.msg);
                that.$refs.list.fetchData();
                that.editData.status = false;
              } else {
                that.$error(res.msg);
              }
            }).catch(() => {});
          }
        });
      },
      del (item) {
        let that = this;
        let arr = []
        arr.push(item.id)
        that
            .$confirm("此操作会将该snmp模块彻底删除，不可恢复, 是否继续?", "删除提醒")
            .then(() => {
              that.$api
                  .jpost("snmp_exporter.module_remove", arr)
                  .then(res => {
                    if (res.status === 1) {
                      that.$success(res.msg);
                      that.$refs.list.fetchData();
                    } else {
                      that.$error(res.msg);
                    }
                  }).catch(() => {});
            })
            .catch(() => {
            });
      },
      // 生成配置
      generate(){
        let that= this
        this.$api.get("snmp_exporter.refresh").then(res => {
          if (res.status === 1) {
            that.$success(res.msg);
            that.$refs.list.fetchData();
          } else {
            that.$error(res.msg);
          }
        }).catch(() => {});
      },
      setBaseInfo (item) {
        this.drawer.data = item;
        this.drawer.show = true;
      },
    },
    mounted () {
      this.userinfo = cacheUserinfo.load()
      // this.getPurview();
      // this.getTest();

    }
  };
</script>

<style lang="scss" scoped>
    .tabs {
        width: 290px;
    }

    .line20 /deep/ .el-form-item__label {
        line-height: 20px !important;
    }

    .wid120 {

        width: 120px !important;
    }
</style>
